<template>
  <div>
    <div class="flex">
        <div class="big">
         <img :src="myimg[0]" alt="">
        </div>
        <div class="box">
            <img :src="myimg[1]" alt="">
            <img :src="myimg[2]" alt="">
        </div>
        <div class="box">
            <img :src="myimg[3]" alt="">
            <img :src="myimg[4]" alt="">
        </div>
        <div class="box">
            <img :src="myimg[5]" alt="">
            <img :src="myimg[6]" alt="">
        </div>

    </div>

  </div>
</template>

<script>
export default {
    data(){
        return{
            myimg:[],
        }
    },
    // methods:{
    //    fun(){
    //         this.myimg1=this.myimg.shift()
    //     }

    // },
    mounted(){
    this.$http({
        url:"http://localhost:3000/banner",
        method:"get",
    }).then(res=>{
        // console.log(res.data[0].data);

        res.data[0].data.data1.forEach(element => {
            // console.log(element.img1);
            this.myimg.push(element.img1)
            
        });
        // res.data.forEach(element => {
        //     // this.images.push(element)
        // });
    })
}
}
</script>

<style scoped>
.flex{
    display: flex;
    flex-wrap: wrap;
}
.big{
    width: 46%;
    height: 200px;
    margin-left: 2%;
}
.big img {
    width: 100%;
    height: 100%;

}
.box {
    width: 46%;
    height: 200px;
    margin-left: 2%;
}
.box img {
    width: 100%;
    height: 46%;
    margin-top: 2%;
}
</style>